<template>
  <div class="app">
    <Header v-show="isShow"></Header>
    <transition
      :duration="{ enter: 500, leave: 200 }"
      enter-active-class="animated fadeIn"
      leave-active-class="animated fadeOut"
    >
      <router-view class="view"></router-view>
    </transition>
    <Footer></Footer>
  </div>
</template>


<script>
import Header from "./components/Header";
import Footer from "./components/Footer";
export default {
  data() {
    return {
      transitionName: "slide-left",
      oldRouteName: "",
      isShow: true,
    };
  },
  watch: {
    $route(newVal) {
      if (!newVal.meta.isTable) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
  },
  components: {
    Header,
    Footer,
  },
};
</script>

<style scoped lang="scss">
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .view {
    flex: 1;
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>